<template>
  <r-view class="bg-gray view-uc">
    <div class="header">
      <r-image flip class="photo" :src="photo">
        <r-icon name="user-h.svg" slot="placeholder"/>
      </r-image>
      <div>
        <h2>
          <strong>张月</strong>
          <label>白银会员</label>
        </h2>
        <small>150****7430</small>
      </div>
    </div>

    <ul class="dashboard">
      <li>
        <router-link to="/wallet">
          <h3><strong>0</strong>元</h3>
          <span class="desc">余额·储值</span>
        </router-link>
      </li>
      <li>
        <h3><strong>1</strong>张</h3>
        <span class="desc">红包</span>
      </li>
      <li>
        <h3><strong>0</strong>张</h3>
        <span class="desc">商品券</span>
      </li>
      <li>
        <h3><strong>120</strong>分</h3>
        <span class="desc">积分<i class="link-exchange">兑换</i></span>
      </li>
    </ul>

    <div class="panel-interests">
      <h2>会员权益</h2>
      <ul class="dashboard">
        <li>购物返现</li>
        <li>会员专享价</li>
        <li>1小时送达</li>
      </ul>
    </div>
  </r-view>
</template>
<script>
import RView from 'src/components/r-view'
import RImage from 'src/components/r-image'
import RIcon from 'src/components/r-icon'
export default {
  name: 'view-uc',
  components: {
    RView,
    RImage,
    RIcon
  },
  data () {
    return {
      photo: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1519416421,724601353&fm=27&gp=0.jpg'
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .view-uc {
    .header {
      background-color: $color-primary;
      color: white;
      padding: 20px 15px;
      @extend %flex-start;

      strong {
        font-size: 16px;
      }

      small {
        font-size: 12px;
        line-height: 20px;
      }

      h2 {
        font-weight: normal;
        font-size: 16px;
        margin: 5px 0;
        @extend %flex-start;

        label {
          border-radius: 8px;
          padding: 1px 5px;
          margin: 0 5px;
          font-size: 11px;
          line-height: 16px;
          background-color: $color-info;
          box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
        }
      }
    }

    .photo {
      width: 80px;
      height: 80px;
      margin-right: 15px;

      svg[name="user-h"] {
        position: relative;
        top: -3px;
      }

      svg[name="user-o"] {
        width: 100%;
      }

      .front,
      .back {
        border-radius: 50%;
        overflow: hidden;
      }
    }

    .dashboard {
      @extend %flex-justify;
      background-color: white;
      margin-bottom: 10px;

      > li {
        padding: 15px 0;
        flex: 1;
        text-align: center;
      }

      h3 {
        margin: 0;
        font-size: inherit;
        color: inherit;
        font-weight: normal;
        line-height: 26px;
      }

      strong {
        font-size: 16px;
        color: $color-primary;
        font-weight: 400;
      }
    }

    .link-exchange {
      font-style: normal;
      color: $color-info;
      font-size: 14px;
      text-decoration: underline;
    }

    .panel-interests {
      h2 {
        font-size: 20px;
        color: $color-head;
        margin: 0 $breath;
        font-weight: 400;
        line-height: 36px;
      }
    }
  }
</style>
